<template>
	<view class="page">
		<scroll-view id="scroll-view" class="scroll-view" scroll-y :scroll-top="scrollTop" @scroll="onScoll">
			<view class="message" :id="`message-${index}`" v-for="(item, index) in messages" :key="index">
				<image class="message__avatar" :src="item.avatar" mode="aspectFill"></image>
				<view class="message__container">
					<view class="message__name">{{item.nickName}}</view>
					<view class="message__msg">{{item.msg}}</view>
				</view>
			</view>
		</scroll-view>

		<form class="form" :style="formStyle">
			<!-- 
				adjust-position  当键盘抬起时，是否需要上移页面
				@keyboardheightchange 当键盘高度发生变化时的一个事件
			 -->
			<input class="input" :adjust-position="false" placeholder="这是一个输入框"
				@keyboardheightchange="onKeyboardheightchange" @confirm="onSubmit" />
		</form>
	</view>
</template>

<script>
	import io from '@holytiny/wxmp-socket.io-client'

	export default {
		data() {
			return {
				scrollIntoView: '',
				scrollTop: 0, // 滚动条距离顶部的距离
				old: {
					scrollTop: 0,
					scrollHeight: 0,
				},
				socketTask: null, // 当前 socketTask 实例
				keyboardHeight: 0,

				curOpenId: '4444',
				messages: [
					// {
					// // openId: '1111',
					// // avatar: '../../static/logo.png',
					// // nickName: '张三',
					// // msg: 'Hello, 你好呀。我的天，你真的好吗。你真的好吗。你真的好吗。你真的好吗。你真的好吗。你真的好吗。你真的好吗。'
					// },
				]
			}
		},

		computed: {
			formStyle() {
				let style = {}
				if (this.keyboardHeight > 0) {
					style.paddingBottom = this.keyboardHeight + 'px'
				}
				return style
			}
		},

		methods: {
			onKeyboardheightchange(event) {
				this.keyboardHeight = event.detail.height
			},

			onScoll(event) {
				console.log('onScoll', event)
				this.old.scrollTop = event.detail.scrollTop
				this.old.scrollHeight = event.detail.scrollHeight
			},

			onSubmit(event) {
				console.log('event', event)
				// 1. 获取输入框的内容
				const value = event.detail.value.trim()
				if (!value) return

				this.socketTask.send({
					data: value
				})
			}
		},

		async mounted() {
			// 1. 创建 socket 链接
			// 		PS: url 地址的服务，必须时 webscoket 服务，不能是 socket.io 启动的，
			// 			如果是 socket.io 启动的服务，必须使用 socket.io-client 里面 io 对象去建立链接
			// 			socket.io-client 这个包，能否直接在小程序中使用，需要验证。
			// 			

			// 			其他开发人员提供的用于小程序端的 socket.io-client 
			// https://developers.weixin.qq.com/community/develop/article/doc/0002042bb204d0ceb2696e79d5b013
			// this.socketTask = uni.connectSocket({
			// 	url: 'ws://will.natapp4.cc?nickName=' + '张胜男',
			// 	complete() {}
			// })


			const socket = io('ws://will.natapp4.cc?nickName=' + '张胜男', {
				// 显式指定websocket传输层
				transports: ['websocket']
			})

			console.log('socket', socket)

			socket.on('welcome', (payload) => {
				console.log('welcome', payload)
			})
		}
	}
</script>

<style lang="scss">
	.page {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #E4E4E4;
	}

	.scroll-view {
		flex: 1;
		overflow: hidden;
	}

	.message {
		padding: 20rpx;
		display: flex;

		&__avatar {
			width: 80rpx;
			height: 80rpx;
		}

		&__container {
			margin: 0 15rpx;
			flex: 1;
		}

		&__name {
			font-size: 32rpx;
			line-height: 48rpx;
			color: #202020;
		}

		&__msg {
			font-size: 24rpx;
			line-height: 36rpx;
			color: #707070;
		}
	}

	.form {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: env(safe-area-inset-bottom, 0);
		width: 100%;
		height: 100rpx;
		background-color: #ccc;

		.input {
			padding: 0 32rpx;
			width: 500rpx;
			height: 64rpx;
			border-radius: 32rpx;
			background-color: #EDEDED;
		}
	}
</style>